<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MyStack.Models.StackView>" %>

<asp:Content ID="Content4" ContentPlaceHolderID="HeadContentExplore" runat="server">
    <style type="text/css">
        #userAvatar
        {
            float: left;
            background-color: Black;
            height: 100px;
            width: 100px;
        }
        #userAvatarImg
        {
        	 visibility:hidden;
        }
        #userStackInfo
        {
            margin-left: 100px; /* determined by size of image/userAvatar width */
            padding: 0 10px 0 10px;
            font-size: 1.5em;
            font-weight: bold;
            color: #848a73;
        }
        #newboxes1, #newboxes2
        {
            /*border-top: solid 1px White; /* Darker Beige Border*/
            /*padding-top: 10px;*/
        }
        .stackLinks a
        {
            font-weight: bold;
            font-size: 1.2em;
            color: #848a73;
            color: White;
        }
        #owner
        {
            font-size: 2.2em;
            color: #7a7368;
            font-weight: 900;
        }
        #link1
        {
            float: left;
        }
        #link2
        {
            float: right;
        }
        #stackSwitch
        {
            /*padding: 0 0 10px 0;*/
        }
        #stackSwitch a
        {
            font-weight: bold;
            font-size: 1.5em; /*color: #7a7368;*/
            color: White;
        }
        #stackContainer
        {
        	margin-left:20%;
            width: 400px;
            background-color: #99aabb;
            display:inline-table;            
        }
        #userStackInfo a
        {
            font-weight: bold;
            font-size: 1.2em;
            color: #75bce7;
        }
        #stackContentPadding
        {
            padding: 0px 20px 10px 20px;
        }
    </style>

    <script type="text/javascript" language="javascript">
        // Highlight the current stack by default
        window.onload = function() { showonlyone('newboxes1'); };
    </script>

</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Current
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <!-- This is how you display a user avatar, the height is arbitrary -->
    <div style="padding-top:20px;">
    <div id="userAvatar">
        <img alt="avatar" id="userAvatarImg" onload="imageResize(100, 'userAvatarImg');"
            src='<%= Url.Action("Show", "Image", new { id=Model.User.UserId }) %>' />
    </div>
    <div id="userStackInfo">
        <div id="owner">
            <%= Html.Encode(Model.User.Name.Trim()) %>'s stack.</div>
        View
        <%= Html.ActionLink(Model.User.Name.Trim() + "'s", "Activity", new { id = Model.User.UserId })%>
        activity.<br />
        <%
            //  Only show the push link if this is the current user's stack
            if (Model.User.Name == this.User.Identity.Name)
            { %>
        <%= Html.ActionLink("Push", "Push") %>
        a Story.
        <%
            }
        %>
    </div>
    </div>
    <div class="clear" style="padding-bottom: 20px">
    </div>
    <div id="Description" style="width:200px;display:inline;"></div>
<div style="width:266px; margin:0 auto;">    
    <div id="myStack-top">
        <a id="myStack-top-left" href="javascript:showonlyone('newboxes1');"><img id="image1" border="0" src="/Content/stack-top-left.png" style="visibility:visible;" alt="new" width="133" height="51" /></a>
        <a id="myStack-top-right" href="javascript:showonlyone('newboxes2');"><img id="image2" border="0" src="/Content/stack-top-right.png" style="visibility:visible;"  alt="new" width="133" height="51" /></a>
    </div>
    <div id="myStack-middle">
        <div id="stackContentPadding">

    <div class="clear" style="padding-bottom: 10px">
    </div> 
            <div name="newboxes" class="stackLinks" id="newboxes1" style="display: block;">
                <% foreach (var story in Model.Stories)
                   {%>

    <div class="clear" style="padding-bottom: 0.5em">
    </div> 
                <%= Html.ActionLink(story.Title, "Pop", new {storyid = story.StoryId, stackid = story.StackId}) %>               
                <%}
                %>
                <!--<p style="color:White;">New stories have been pushed onto your stack but have not been popped off yet.  You can read them here.</p>!-->
            </div>
            <div name="newboxes" class="stackLinks" id="newboxes2" style="display: none;">
                <% foreach (var story in Model.PoppedStories)
                   {%>
                <!--<%= Html.ActionLink(story.Title, "Pop", new {storyid = story.StoryId, stackid = story.StackId}) %><br />-->
                
    <div class="clear" style="padding-bottom: 0.5em">
    </div>
                <%= Html.ActionLink(story.Title, "History", "Story", new {id = story.StoryId}, null) %>
                <%} %>
                <!--<p style="color:White;">Read stories have been popped off of your stack by others, you can see thier history and check out who has read them.</p>!-->
            </div>         
        </div>
      </div>
    <div id="myStack-bottom"></div>
</div>
    <%--<%=Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) %> |
        <%=Html.ActionLink("Back to List", "Index") %>--%>
</asp:Content>
